<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>添加产品分类信息</title>
    <link href="/back/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/back/css/select.css" rel="stylesheet" type="text/css" />
    <link href="/back/js/kindeditor/themes/default/default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        .bigbox{
            display: table;
            width: 625px;
            height: auto;
            box-sizing: border-box;
            border: 1px solid #000;
            margin: 100px auto;
            padding: 10px 0 10px 5px;
        }
        .bigbox>div{

            width: 200px;
            height: 200px;
            float: left;
            margin: 0 5px 5px 0;
            position: relative;
        }
        .line{
            width: 100%;
            height:20px;
            position: absolute;
            bottom: -3px;
        }
        .line p{
            width: 50%;
            float: left;
            text-align: center;
            cursor: pointer;
            transition: .3s;
        }
        .line p:hover{
            color: #ccc;
        }
        .bigbox .addimgbtn{
            background-color: #ccc;
        }
        .addimgbtn h1{
            text-align: center;
            margin-top: 80px;
            cursor: pointer;
        }
        .imgbox{
            width: 100%;
            height: 180px;
            background-color: #A52A2A;
        }

    </style>
</head>
<body>
<div class="formbody">
    <div class="formtitle"><span>基本信息</span></div>
    <form id = "from">
        <ul class="forminfo">
            <input type="hidden" name="youlezaixiangcunId"  value="${youlezaixiangcun.youlezaixiangcunId?c}"/>
            <li><label>标题<b>*</b></label><input maxlength="30" id="title" name="title" type="text" class="dfinput" value="${youlezaixiangcun.title!''}" /><i>名称请控制在30个字以内</i></li>

<li><label>描述</label>
    <textarea id="youlezaixiangcunDec" name="youlezaixiangcunDec" rows="3" cols="100" class="textinput" >${youlezaixiangcun.youlezaixiangcunDec!''}</textarea>
</li>
<li><label>图片</label>
    <input type="button" class="btn youlezaixiangcunOnePicUpload" value="上传图片" />
    <input type="hidden" id="images" name="images"/>
    <div id="bigbox" class="bigbox">
        <#if images??>
            <#list images as image>
                <div class="div">
                    <a href="javascript:void(0);" onclick="catImage('${image.imageUrl!''}')"><img class="imgbox" src="${image.imageUrl!''}" /></a>
                    <div class="line">
                        <p class="setTop" onclick="addlable(this)">置顶</p><p class="del" onclick="dellabe(this)">删除</p>
                    </div>
                </div>
            </#list>
        </#if>
    </div>
</li>
<li><label>&nbsp;</label><input type="button" class="btn" value="确认" onclick="if(chek()) submitForm('/manager/youlezaixiangcun/update','from');" /></li>
</ul>
</form>
</div>
<script src="/back/js/jquery.js" language="JavaScript" ></script>
<script type="text/javascript" src="/back/js/select-ui.min.js"></script>

<!-- 弹窗js -->
<script src="/back/js/layer/layer.js"></script>
<script src="/back/js/base.js"></script>
<!-- 富文本，上传啥的 -->
<script type="text/javascript" src="/back/js/kindeditor/kindeditor-all.js"></script>
<script type="text/javascript" src="/back/js/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="/back/js/kindeditor/plugins/code/prettify.js"></script>
<script type="text/javascript" src="/back/js/kindeditor/kindeditor-base.js"></script>
<script type="text/javascript" src="/back/js/kindeditorJs/xunyou_kindeditor.js"></script>
<script type="text/javascript">

    $(document).ready(function(e) {
        $(".select3").uedSelect({
            width : 100
        });
    });
    //页面初始化完毕后执行此方法
    //页面初始化完毕后执行此方法
    $(function(){
        //初始化类目选择和图片上传器
        E3.initYoulezaixiangcunOnePicUpload();
    });

    //删除图片
    function dellabe(is){
        $(is).parent().parent().remove();
        /* var parentDiv =  is.parentNode.parentNode;
        bigbox.removeChild(parentDiv); */
    }

    //置顶
    function addlable(is){
        /* var parentDiv =  is.parentNode.parentNode;
        bigbox.removeChild(parentDiv);
        bigbox.insertBefore(parentDiv , bigbox.children[0]); */
        var a = $(is).parent().parent();
        var bigbox = $(a).parent().attr("id")
        $(is).parent().parent().remove();
        $("#"+bigbox).prepend(a)
    }

    /**
     * 轮播图处理
     */
    function bannerHandle(){

        var image = "";

        var banners = $("#bigbox .div");
        if (banners.length>0){
            for (var i = 0; i < banners.length; i++) {

                var banner = banners[i];
                var img = $(banner).find('img');
                image+=$(img).attr("src")+","
            }
        }

        $("input[name = 'images']").val(image);
    }
    function chek(){
        bannerHandle();
        var parameter = ["title","images"];
        var type = [null];
        var msg = ["标题不能为空！","图片必传！"];
        return validation(parameter,type,msg);
    }
</script>
</body>
</html>
